<template>
  <view class="container">
    <view class="record-item" v-for="(record, index) in records" :key="index">
      <view :class="['record-status', getStatusClass(record.status)]">
        {{ record.status }}
      </view>
      <view class="record-info">
        <view class="record-time">{{ record.time }}</view>
        <view class="record-description">{{ record.description }}</view>
        <view class="record-address">{{ record.address }}</view>
        <template v-if="record.status === '审核失败'">
          <view class="record-extra">{{ record.comments }}</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ownerId: '',
      ownerRoomRecords: [],
      records: []
    }
  },
  methods: {
    getStatusClass(status) {
      if (status === '等待审核') return 'status-pending';
      if (status === '已绑定') return 'status-passed';
      if (status === '审核失败') return 'status-failed';
      if (status === '已解绑') return 'status-unbind';
      return '';
    },

    loadOwnerRoomCordsByOwnerId() {
      this.$http.get('/uni-app/ownerRoomRecords/' + this.ownerId).then(result => {
        console.log("*********", result.data.data)
        this.ownerRoomRecords = result.data.data
        for (let i = 0; i < this.ownerRoomRecords.length; i++) {
          const status = this.ownerRoomRecords[i].roomStatus;
          let description = '';
          let time = '';
          if (status === '0') {
            description = '房屋绑定申请待审核';
            time = this.ownerRoomRecords[i].formattedCreateTime;
          } else if (status === '1') {
            description = '房屋绑定申请已通过审核';
            time = this.ownerRoomRecords[i].formattedUpdateTime;
          } else if (status === '2') {
            description = '房屋绑定申请未通过审核，请重新提交';
            time = this.ownerRoomRecords[i].formattedUpdateTime;
          } else if (status === '3') {
            description = '房屋已和您解除绑定';
            time = this.ownerRoomRecords[i].formattedUpdateTime;
          }
          this.records.push({
            status: this.getStatusText(status),
            time,
            description,
            address: this.ownerRoomRecords[i].address,
            comments: this.ownerRoomRecords[i].recordAuditOpinion
          });
        }
      });
    },

    getStatusText(status) {
      if (status === '0') return '等待审核';
      if (status === '1') return '已绑定';
      if (status === '2') return '审核失败';
      if (status === '3') return '已解绑';
      return '';
    }
  },

  mounted() {
    this.ownerId = uni.getStorageSync('ownerId');
    this.loadOwnerRoomCordsByOwnerId();
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.record-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.record-status {
  padding: 5px;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
}

.status-pending {
  background-color: #fadb14;
}

.status-passed {
  background-color: #52c41a;
}

.status-failed {
  background-color: #ff4d4f;
}

.status-unbind {
  background-color: #aaaaaa;
}

.record-info {
  margin-left: 10px;
}

.record-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee; /* 添加分割线样式 */
}

.record-description,
.record-address {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.record-extra {
  font-size: 12px;
  color: #FFA500;
}
</style>
